> .containerSettings { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; }
> .containerSettings {
    > .head {
        display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;
        gap: 0px 8px; overflow: hidden;
    }

    > .body { display: flex; flex-direction: column; justify-content: space-between; padding: 0px 6px 12px 12px; position: relative; flex-grow: 1; overscroll-behavior: none; }
    > .body {
        .list { display: flex; flex-direction: column; justify-content: space-between; height: 100%; border-radius: 12px; background: var(--color-bg-primary); padding: 8px 0px; }
        .list {
			.ReactVirtualized__List { padding: 0px 8px; }

            .inner { flex-grow: 1; }
            .row {
                > .section { padding-top: 16px; }
                > .section.isFirst { padding-top: 4px; }
            }

            .section {
                > .name { @include text-small; font-weight: 500; color: var(--color-text-secondary); margin: 0px; padding: 0px 8px; }
            }

            .items { display: flex; flex-direction: column; }

            .item { display: flex; position: relative; align-items: center; flex-direction: row; gap: 0px 6px; padding: 3px 8px; }
			.item::before {
				content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1;
				pointer-events: none; transition: background-color $transitionCommon; border-radius: 6px;
			}
			.item.hover::before, .item:hover::before, .item.active::before { background: var(--color-shape-highlight-medium); }

            .item {
				.icon, .iconObject { flex-shrink: 0; }
                .icon { width: 20px; height: 20px; }
                .icon.logout { width: 22px; height: 22px; background-image: url('~img/icon/popup/settings/logout.svg'); }

                .name { @include text-overflow-nw; flex-grow: 1; }

                .caption { color: var(--color-text-secondary); text-align: right; @include text-overflow-nw; }
                .caption.join { font-weight: 500; padding: 2px 8px; border-radius: 4px; @include text-small; background: var(--color-control-accent); color: var(--color-bg-primary); }
                .caption.alert { width: 20px; height: 20px; line-height: 20px; text-align: center; background-color: var(--color-red); color: var(--color-control-bg); border-radius: 50%; }
            }

            .item.isTypeOrRelation { padding-left: 26px; }

            .item.itemAccount { padding: 8px; gap: 0px 12px; align-items: center; }
            .item.itemAccount {
                .iconObject { flex-shrink: 0; }
                .name { display: flex; flex-direction: column; justify-content: center; }
                .name {
                    .userName { @include text-common; @include text-overflow-nw; font-weight: 600; }
                    .anyName { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); }
                }
            }
        }

        .logout { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 0px 8px; border-radius: 8px; padding: 4px 0px; margin: 0px 8px; }
        .logout {
            .icon { width: 20px; height: 20px; background-size: 20px; background-image: url('~img/icon/popup/settings/logout.svg'); }
        }
		.logout:hover { background-color: var(--color-shape-highlight-medium); }
    }
}

> .containerSettings.spaceSettings {
    > .body {
        > .list { padding-bottom: 0px; }
        > .list {
            .ReactVirtualized__List { padding-bottom: 8px; }
        }
    }
}

> .containerSettings.spaceSettingsLibrary {
    > .body {
        > .list { padding-bottom: 0px; justify-content: flex-start; }
        > .list {
            .ReactVirtualized__List { padding-bottom: 8px; padding-top: 2px; }

            > .head { justify-content: space-between; }
            > .head {
                .left { display: flex; gap: 0px 4px; align-items: center; }
                .title { @include text-paragraph; font-weight: 600; }
            }
        }

        .filterWrapper { display: flex; gap: 0px 8px; padding: 8px 16px; }
        .filterWrapper {
			.side.left { flex-grow: 1; }
			.side.right { flex-shrink: 0; }
            .filter { padding: 0px; }
        }
    }
}
